<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .allGoods {
            width: 500px;
            height: 100px;
            margin: 100px auto;
        }

        .decrease,
        .increase {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 20px;
            text-decoration: none;
            vertical-align: bottom;

        }

        .gtext {
            height: 20px;
            width: 80px;
            border: 1px solid #ccc;
            outline: none;
            text-align: center;
        }

        .price {
            margin-left: 100px;
        }

        .one {
            display: inline-block;
            width: 150px;
        }

        .delGoods {
            float: right;
        }

        .total {
            text-align: center;
        }

        .total span,
        .total em {
            color: red;
        }
    </style>
</head>

<body>
    <div class="allGoods">
        <div class="goods">
            <span class="one">单价：￥12.50</span>
            <a href="javascript:;" class="decrease">-</a>
            <input type="text" value="1" class="gtext">
            <a href="javascript:;" class="increase">+</a>
            <span class="price">￥12.50</span>
            <a href="javascript:;" class="delGoods">删除</a>
        </div>
        <div class="goods">
            <span class="one">单价：￥8.00</span>
            <a href="javascript:;" class="decrease">-</a>
            <input type="text" value="1" class="gtext">
            <a href="javascript:;" class="increase">+</a>
            <span class="price">￥8.00</span>
            <a href="javascript:;" class="delGoods">删除</a>
        </div>
        <div class="goods">
            <span class="one">单价：￥52.00</span>
            <a href="javascript:;" class="decrease">-</a>
            <input type="text" value="1" class="gtext">
            <a href="javascript:;" class="increase">+</a>
            <span class="price">￥52.00</span>
            <a href="javascript:;" class="delGoods">删除</a>
        </div>
    </div>
    <div class="total">
        共选<span></span>件商品
        总金额<em></em>&nbsp;元
        <a href="javascript:;" class="delAll">清空所有商品</a>
    </div>


    <script>
        //parents返回祖先父级元素
        $(function () {
            getSum();//加载页面先调用
            $(".increase").click(function () {
                var n = $(this).siblings(".gtext").val();
                n++;
                $(this).siblings(".gtext").val(n);
                //商品小计
                var p = $(this).siblings(".one").html();
                p = p.substr(4);
                var total = (p * n).toFixed(2);//toFixed可以设置保留几位小数
                $(this).siblings(".price").html("￥" + total);
                getSum();
            });
            $(".decrease").click(function () {
                var n = $(this).siblings(".gtext").val();
                if (n == 1) {
                    return false;
                }
                n--;
                $(this).siblings(".gtext").val(n);
                //商品小计
                var p = $(this).siblings(".one").html();
                p = p.substr(4);
                var total = (p * n).toFixed(2);//toFixed可以设置保留几位小数
                $(this).siblings(".price").html("￥" + total);
                getSum();
            });
            //只要修改商品数量，总价也会变化
            $(".gtext").change(function () {
                var n = $(this).val();
                var p = $(this).siblings(".one").html();
                p = p.substr(4);
                if (n < 1) {
                    return false;
                }
                $(this).siblings(".price").html("￥" + (n * p).toFixed(2));
                getSum();
            });
            //遍历商品数
            function getSum() {
                var gSum = 0;
                var pSum = 0;
                $(".gtext").each(function (index, ele) {
                    gSum += parseInt($(ele).val());
                });
                $(".total span").text(gSum);//记得放外边
                $(".price").each(function (i, ele) {
                    pSum += parseFloat($(ele).html().substr(1))
                });
                $(".total em").text(pSum.toFixed(2));
            }
            //delGoods删除按钮
            $(".delGoods").click(function () {
                $(this).parent(".goods").remove();
                getSum();
            });
            //清空商品
            $(".delAll").click(function () {
                $(".allGoods").empty();
                getSum();
            })
        })
    </script>
</body>

</html>